import React from 'react';
import { Card as AntdCard } from 'antd';
import type { CardProps as AntdCardProps } from 'antd';
import { createStyles } from 'antd-style';

export interface CardProps extends AntdCardProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  card: css`
    border-radius: ${token.borderRadius}px;
    box-shadow: ${token.boxShadow};
  `,
}));

const CardComponent: React.FC<CardProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const cardClassName = cx(
    className,
    customClassName,
    styles.card
  );

  return <AntdCard className={cardClassName} {...restProps} />;
};

type CardType = typeof CardComponent & {
  Meta: typeof AntdCard.Meta;
  Grid: typeof AntdCard.Grid;
};

const Card = CardComponent as CardType;
Card.Meta = AntdCard.Meta;
Card.Grid = AntdCard.Grid;

export { Card };
export default Card;

